<template>
  <view class="container">
    <uni-card :title="getExamScore" :note="getExamTime" :extra="getExamTotalScore" style="margin: 10px 3px">
      <view style="font-size: small">试卷名：
        <view style="color: #5fac09">{{ paperInfo.title }}</view>
      </view>
      <view style="font-size: small">题目数：
        <text style="color: #5fac09">{{ paperInfo.question_list.length }}</text>
      </view>
    </uni-card>
    <!-- 题目列表 -->
    <view v-for="(item,index) in paperInfo.question_list" :key="index" class="question-item">
      <view v-if="unComplete==index" style="text-align: center;color:#f63d46;">未作答</view>
      <!-- 题目 -->
      <view class="hor-layout-center question-title">
        <text style="font-weight: bold;">{{ index + 1 }}.
          <text v-if="item.type===0&&item.single">【单选】</text>
          <text v-if="item.type===0&&!item.single">【多选】</text>
          <text>{{ item.title }}</text>
          <text class="question-score" style="font-weight: normal">({{ item.score }}分)</text>
        </text>
      </view>
      <!-- 选择题 -->
      <view style="margin: 10px;" v-if="item.type==0">
        <view v-for="(opt,ind) in item.options" :key="ind">
          <view>{{ opt.text }}、{{ opt.content }}</view>
        </view>
      </view>
      <!--回答内容-->
      <view class="hor-layout question-score-view">
        <view v-if="item.type==0">回答：
          <text v-for="(item,index) in item.uAnswer" :key="index">{{ item }}</text>
        </view>
        <view v-else>回答：{{ getDecide(item.uDecide) }}</view>
        <text class="question-score" :style="{color:item.uScore?'red':'#4a4a4a'}">得分:{{ item.uScore }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import UniDataChecklist from "../../components/uni-data-checkbox/uni-data-checkbox";
import UniCard from "../../components/uni-card/uni-card";
import {convertDateTime} from "@/common/common.js"

export default {
  components: {UniCard, UniDataChecklist},
  data() {
    return {
      examId: '',
      paperInfo: {},
      checkOptions: [{value: 'true', text: '正确', disable: true}, {value: 'false', text: '错误', disable: true}],
      unComplete: -1
    }
  },
  computed: {
    getExamScore() {
      let totalScore = this.paperInfo.totalScore
      let uTotalScore = this.paperInfo.uTotalScore
      return `得分：${uTotalScore}`
    },
    getExamTime() {
      let time = convertDateTime(this.paperInfo.create_date)
      return `答题时间：${time}`
    },
    getExamTotalScore() {
      let totalScore = this.paperInfo.totalScore
      return `总分数：${totalScore}`
    }
  },
  onLoad(event) {
    let examId = event.examId
    this.examId = examId
    this.getExamInfo()
  },
  methods: {
    getExamInfo() {
      this.$request('exam/exam/getExamInfo', {
        examId: this.examId
      }).then(res => {
        let result = res.data[0]
        if (result) this.paperInfo = result
        else uni.showToast({title: '暂无数据'})
      }).catch(err => {
        // debugger
        uni.showToast({
          title: err.message || "请求失败!"
        })
      })
    },
    getDecide(decide) {
      if (decide.toString() === 'true') return "正确"
	  else if (decide.toString() === 'false') return "错误"
      else return ""
    }
  }
}
</script>

<style>
.container {
  padding: 15px;
}

.exam-title {
  font-weight: bold;
  font-size: large;
  width: 100%;
  text-align: center;
}

.exam-time {
  font-size: small;
  margin-top: 10px;
  width: 100%;
}

.question-item {
  font-size: small;
  margin: 10px 3px;
  padding: 7px;
  border-radius: 5px;
  background: #C8C7CC;
}

.question-title {
  font-size: medium;
  font-weight: 500;
}

.question-score-view {
  padding: 5px;
  margin-top: 5px;
  border-radius: 3px;
  background: #c29d8e;
}

.question-score {
  margin-left: 15px;
  font-size: small;
  color: #007AFF;
  font-weight: bold;
}

.submit-view {
  color: white;
  width: 150px;
  position: fixed;
  bottom: 10px;
  padding: 10px 0px;
  background: #55aa00;
  border-radius: 5px;
  text-align: center;
  left: calc(50% - 75px);
}
</style>
